<template>
  <div style="width:100%;height:102%;background:#000;margin-top:-2px;" class="ycConnect" @click="handleAutoFocs">
    <el-scrollbar class="app-container-scroll-bar">
      <el-form   ref="ruleForm2"  class="demo-ruleForm" label-width="10px" style="margin-top:20px;" v-if="formShow">
          <el-form-item  prop="pass">
            <span style="color:#fff;">loginName：</span>
            <input ref="nameipt" @keyup.enter="handleChange"  v-model="from.username"
            style="display:inline-block;width:500px;outline:none;background:#000;color:#fff;border:none;"/>
          </el-form-item>
          <el-form-item  prop="checkPass" style="margin-top:-20px;">
            <span style="color:#fff;" v-show="isShow">passWord：</span>
            <input ref="pasipt" 
            @keyup.enter="submit" 
            @keyup.ctrl.67="handleClearFrom" v-model="from.password"
            :disabled="disabled"
            style="display:inline-block;width:500px;outline:none;background:#000;color:#fff;border:none;" />
          </el-form-item>
          <el-form-item  prop="checkPass" style="margin-top:-20px;">
            <input type="text" class="restipt" @keyup.ctrl.67="handleClearFrom" style="display:none;">
          </el-form-item>
      </el-form>
      <span v-else>{{errorMsg}}</span>
    </el-scrollbar>
  </div>
</template>

<script>
import { vncAuth,vncConnection } from "@/service/swagger/ResourceInitController.js";
  export default{
    data(){
      return{
        isShow:false,
        formShow:false,
        disabled:true,
        errorMsg:'',
        ip:this.$route.query.ip,
        from:{
          ip:this.$route.query.ip,
          username:'',
          password:'',
          vncToken:'',
        }
      }
    },
    created() {
      //获取授权
      vncAuth(this.ip).then(ret=>{
        if(ret&&ret.code == 0){
          console.log(ret)
          this.formShow = true
          this.from.vncToken = ret.data
          this.changfouce()
        }else{
          this.formShow = false
          this.errorMsg = ret.message
        }
      })
    },
    methods:{
      //首次进入聚焦用户名
      changfouce(){
        this.$nextTick((x)=>{  
          this.$refs.nameipt.focus()
        })
      },
      //输入用户名回车 聚焦密码
      handleChange(){
        if(this.from.username){
            this.disabled = false
            this.isShow = true
            setTimeout(()=>{
              this.$refs.pasipt.focus()
            },200)
        }else{
          return false
        }
      },
      //重置表单
      handleClearFrom(){
          this.from.username = ''
          this.from.password = ''
          this.isShow = false
          this.disabled = true
          this.changfouce()
      },
      handleAutoFocs(){
        if(this.isShow){
          this.$refs.pasipt.focus()
        }else{
         this.changfouce()
        }
      },
      submit(){
        vncConnection(this.from).then(ret=>{
          if(ret && ret.code == 0){
            let msg = {
              status:null,
              ws:ret.data,
              encoding:'utf8'
            }
            window.localStorage['msg'] = JSON.stringify(msg)
            window.open('test.html')
           }
        })
      }
    }
  }
</script>



<style scoped>

</style>

